<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        .outer {
            box-sizing: content-box;
            width: 600px;
            height: 500px;
            border: 1px solid rgb(51, 84, 97);
            overflow: hidden;
        }
        ul,li {
            list-style-type: none;
        }
        .inner {
            width: 3000px;
        }
        li {
            float: left;
        }
        img {
            width: 600px;
            height: 300px;
        }
    </style>
</head>
<body>
<div class="outer">
    <ul class="inner">
        <li><img src="325714.jpg" alt="图片" title="图片" class="now"></li>
        <li><img src="325725.jpg" alt="图片" title="图片"></li>
        <li><img src="325730.jpg" alt="图片" title="图片"></li>
        <li><img src="325733.jpg" alt="图片" title="图片"></li>
        <li><img src="325735.jpg" alt="图片" title="图片"></li>
    </ul>
</div>
<ul id="aaa"></ul>
<script type="text/javascript">
    function toggle() {
        var inner = document.getElementsByClassName("inner")[0];
        var lis = document.getElementsByTagName("li");
        var aaa = document.getElementById('aaa');
        for (var i = 0, length = lis.length; i < length; i++) {
            var temp = lis[i];
            aaa.appendChild(temp);
        }
    }
    setInterval(toggle, 3000);
</script>
</body>
</html>